import { Component, PropsWithChildren } from 'react'
import { View, Text } from '@tarojs/components'
import { AtList, AtListItem, AtIcon } from "taro-ui"
import './index.scss'
import Taro from '@tarojs/taro'

export default class Index extends Component<PropsWithChildren> {

  componentWillMount() { }

  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }
  onClick() {
    Taro.switchTab({
      url: '/pages/my/index'
    })
  }
  goMessage1() {
    Taro.navigateTo({
      url: '/pages/SystemMsg/index'
    })
  }
  goMessage2() {
    Taro.navigateTo({
      url: '/pages/Interaction/index'
    })
  }
  render() {
    return (
      <View className='index'>
        <View className='nav-bar-box'>
          <View className='status-bar'></View>
          <View className='title-bar'>
            <AtIcon onClick={this.onClick.bind(this)} className='icon' value='chevron-left' size='24' color='#fff'></AtIcon>
            <Text className='tit'>消息</Text>
          </View>
        </View>
        <View className='message'>
          <AtList>
            <AtListItem
              onClick={this.goMessage1.bind(this)}
              title='互动消息'
              arrow='right'
            />
            <AtListItem
              onClick={this.goMessage2.bind(this)}
              title='系统消息'
              arrow='right'
            />
          </AtList>
        </View>
      </View >
    )
  }
}
